<template>
    <template v-if="isList">
        <div class="broad">
                <tip :label="'数字人直播设计'" />
                <div class="search">
                    <SearchFrom :fromList="searchData" :btnList="btnData"  @onClick="searchClick"></SearchFrom>
                </div>
                <BasicTable :tableData="tableInfo.tableData" :headerData="tableInfo.headerData" v-loading="loading">
                    <template #mainVideoCnt="{data}">
                        <span >
                        {{ data.mainVideoCnt }}条
                        </span>
                    </template>
                    <template #replyRuleCnt="{data}">
                        <span >
                        {{ data.replyRuleCnt }}条
                        </span>
                    </template>
                    <template #videoUrl="{data}">
                        <el-button color="#BC81FC"  @click="catVideo(data.videoUrl)">直播预览</el-button>
                    </template>
                    <template #avatarName="{data}">
                        <div class="person-title">
                            <img :src="data.avatarCoverSmall" />
                            <span>{{ data.avatarName }}</span>
                        </div>
                    </template>
                    <template #operate="{data}">
                        <div @click="editClick(data.id)">
                            <el-icon color="#B57DF2" style="margin-left: 10px;;cursor: pointer;"><EditPen /></el-icon>
                        </div>
                    </template>
                    
                </BasicTable>
                <Pagination :isShowTotal="true"  :is-lable="true" :page-size="pageSize" :currentPage="currentPage" :label="addBtn" :total="totalCount" @labelClick="createClick" @page-click="pageClick"/> 
        </div>
        <Dialog 
            :show="showDialog" 
            title="查看视频" 
            :width="850"
            :isCloseTip="false" 
            :is-custom-footer="false"
            @on-close="() => {showDialog = false, videoUrl = ''}"
            @on-sure-click="() => {showDialog = false, videoUrl = ''}"
        >
            <template #content>
            <div style="margin: 0 auto;">
                <Video  :src="videoUrl" />
            </div>
            </template>
        </Dialog>
    </template>
    <router-view v-else></router-view>
</template>

<script setup lang="ts">
import tip from '@/components/tip/tip.vue';
import SearchFrom from '@/components/searchForm/searchForm.vue';
import BasicTable from '@/components/table/basicTable.vue'
import Pagination from '@/components/pagination/pagination.vue'
import { Plus, EditPen } from '@element-plus/icons-vue'
import {reactive, ref, onMounted} from 'vue';
import {FromInfo, BtnInfo} from '@/models/components/index'
import { storeToRefs } from 'pinia';
import { useBroadStore } from '@/store/broad';
import {useRouter, onBeforeRouteUpdate} from 'vue-router'
import {getBroadList} from '@/service/broad'
import {SearchData, TableInfo} from '@/models/home/video'
import {ElMessage} from 'element-plus'
import {to} from 'await-to-js'
const store = useBroadStore();
const { isList } = storeToRefs(store)
const route = useRouter();
const tableInfo = reactive<TableInfo>({
  tableData: [],
  headerData: [
    {
        label: '直播编号',
        prop: 'id',
    },
    {
        label: '数字人',
        prop: 'avatarName',
        isCustom: true,
    },
    {
        label: '标题',
        prop: 'title',
    },
    {
        label: '修改时间',
        prop: 'gmtModified',
    },
    {
        label: '介绍主视频',
        prop: 'mainVideoCnt',
        isCustom: true,
    },
    {
        label: '自动回复规则',
        prop: 'replyRuleCnt',
        isCustom: true,
    },
    {
        label: '预览',
        prop: 'videoUrl',
        isCustom: true,
    },
    {
        label: '操作',
        prop: 'operate',
        isCustom: true,
        fixed: 'right'
    }
]});
const totalCount = ref<string | number>(0)
const currentPage = ref<string | number>(1)
const pageSize = ref<string | number>(8)
const searchData = reactive<FromInfo[]>([
        {label: '数字人', value: '', type: 'input',key: 'avatarName'},
        {label: '标题', value: '',type: 'input', key: 'title'},
    ])
const btnData = reactive<BtnInfo[]>([
        {color: '#542A80', label: '搜索'}
])
const addBtn = {text: '新建直播设计', icon: Plus};
const loading = ref<boolean>(false)
const showDialog = ref<boolean>(false)
const videoUrl = ref<string>('')
onMounted( async () => {
  const search = {currentPage: currentPage.value, pageSize: pageSize.value}
   await getBroadListData(search)
})
onBeforeRouteUpdate(async (to) => {
    if(to.path == '/home/broad') {
        const search = {currentPage: currentPage.value, pageSize: pageSize.value}
        await getBroadListData(search)
    }
})

const getBroadListData = async(parms: SearchData): Promise<void> => {
  loading.value = true;
  const [err, data] = await to(getBroadList(parms))
  loading.value = false;
   if(err || !data.success) {
      ElMessage.error(`请求错误，${data.message}`)
      return;
   }
   tableInfo.tableData = data.items;
   totalCount.value = data.totalCount;
}

// 预览视频
const catVideo = (url: string) => {
  videoUrl.value = url;
  showDialog.value = true;
}
const createClick = (e: string): void => {
    store.setIsList(false);
    route.push('/home/broad/edit')
}
const searchClick = async ({label, value}: any) => {
    searchData.forEach(val => {
        if (val.key)  {
         val.value = value[val.key]
        }
    })
    if(label == '搜索') {
        const search = {currentPage: currentPage.value, pageSize: pageSize.value}
        await getBroadListData({...search, ...value})
    }
}
const pageClick = async (e: string | number) => {
    currentPage.value = e;
    let searchInfo = searchData.reduce((acc, cur) => {
        if (cur.value && cur.key) {
            acc[cur.key] = cur.value;
        }
        return acc;
    }, {} as { [key: string]: any })
    await getBroadListData({currentPage: currentPage.value, pageSize: pageSize.value, ...searchInfo})
}

const editClick = (id: string) => {
    store.setIsList(false);
    route.push({path: '/home/broad/edit', query: {id: id}})
}
</script>

<style lang="css" scoped>
.broad{
    background: #25212B;
    height: 100%;
    border-radius: 10px;
    padding: 10px;
    box-sizing:border-box;
}

.person-title > img {
    height: 50px;
    margin-right: 10px;
}

.search {
    margin-top: 20px;
}
:deep(.el-table__inner-wrapper) {
    max-height: 68vh;
    /* min-height: 62vh; */
}
:deep(.el-loading-mask) {
    background: #51495F;
}
</style>